<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡优化</title>
</head>
 <style> 
    .container {
        width: 100%;

    }

    .control button {
        width: 100px;
        height: 50px;
        background: pink;
        border: none;
        margin-left: 22px;
        margin-top: 20px;

    }

    .container {
        width: 400px;
        height: 400px;
        background: red;
        margin: auto;
        margin-top: 100px;
        border: 5px solid #58bc58;
    }
    .box{font-size: 25px;
    font-weight: 800px;
    color: #fffffF;
    text-align: center;
    margin-top: 20px;
    }
</style> 

<body>
    <div class="container">
        <!-- 选项卡结构 -->
        <div class="control">
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>
     <!-- <script> 
    var box1=document.querySelectorAll(".control button");
    var box2=document.querySelectorAll(".box");
    for(var i=0;i<box1.length;i++){
        box1[i].index=i;
        box1[i].onclick=function(){
            var index=this.index;
            // 获取到按钮的下标
                for(var i = 0 ; i < box2.length ; i++){
                              box2[i].style.display = "none"; 
                            //   隐藏所有元素      //   
                        }
                        box2[index].style.display = "block"; 
                        // 显示当前的点击元素    //  
            }
        }
    
    </script>  -->
    <script>
        function Table(btn_selector, content_selector) {
            this.btns = document.querySelectorAll(btn_selector);
              // 获取到选择按钮
            this.contents = document.querySelectorAll(content_selector);
          // 获取到选择内容
            this.index = 0;
              // 拿到索引
            this.bindEvent();
            // 调用已经初始化结束的功能
            this.changeTable();
            // 调用已经初始化结束的功能
        }
        Table.prototype.bindEvent = function () {
            // 实现事件绑定功能
            var self = this;
            for (var i = 0; i < self.btns.length; i++) {
                self.btns[i].index = i;
                //dom对象上记录的当前数据
                self.btns[i].onclick = function () {
                    self.index = this.index;
                    self.changeTable();
                }
            }
        }
        Table.prototype.changeTable = function () {
            // 实现点击切换内容功能
            var self = this;
            for (var j = 0; j < self.contents.length; j++) {
                self.contents[j].style.display = "none";
                // 先清空内容
            }
            self.contents[self.index].style.display = "block";
            // 点击的时候内容切换
        }
        var table = new Table(".control button", ".box");
    </script> 

</body>

</html>